<script>
    import {location, querystring} from 'svelte-spa-router'
    import List from '../components/list.svelte';
    import Btn from '../components/btn.svelte';
    import Select from '../components/select.svelte';
    import Paging from '../components/paging.svelte';
    import QueryBar from '../components/queryBar.svelte';
    import { onMount } from 'svelte';
    import { Post } from '../lib/net.js';
    import { Version,VersionAdd } from '../api.js';
    import Query from '../model/query.js';
    import moment from 'moment';

    let btnText = `<i>+</i>添加代理`
    let btnHref = "/agent/add"

    let data = {title:["版本号","更新内容","更新时间"],data:[]}
    
    let version = {
        version: "",
        content: "",
    }
    
    // 向列表赛数据，须先定义表头，拿到数据后做title下表映射关系.

    onMount(()=>{
        getList();
    });

    async function getList(e){

       let ret = await Post(Version)
       let _data = [];
       for (let item of ret) {
        _data.push([item.version,item.content,item.created_on])
       }
       data.data = _data;
    }

    async function submit(){
        if(!version.version || !version.content) {
            alert("请填写完整");
            return
        }

        await Post(VersionAdd,version)

        getList()
    }

</script>

<div class="view">
    <div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
         class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            版本信息
        </span>
    </div>
    <div class="ttt container" style="background-color:#fff">
            <div class="field is-horizontal">
                <div class="field-label">
                    <label class="label">版本号</label>
                  </div>
                  <div class="field-body">
                    <div class="field">
                      <div class="control">
                        <input class="is-small input" type="text" bind:value={version.version}>
                      </div>
                    </div>
                  </div>
                </div>
<div class="field is-horizontal">
  <div class="field-label is-normal">
    <label class="label">版本说明</label>
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <textarea class="textarea" placeholder="版本说明" bind:value={version.content}></textarea>
      </div>
    </div>
  </div>
</div>

<div class="field is-horizontal">
  <div class="field-label">
    <!-- Left empty for spacing -->
  </div>
  <div class="field-body">
    <div class="field">
      <div class="control">
        <button class="button is-info" on:click={submit}>
            提交
        </button>
      </div>
    </div>
  </div>
</div>
    </div>
    <div class="content"></div>
    <div class="container" style="margin-top: -10px">
        <List data={data}/>
    </div>
</div>

<style>
    .borderRadius4{
        border-radius: 4px;
    }
    .container {
        margin:20px 5px;
    }
    .info {
        background: #fff;
    }
    .btn {
        line-height: 5px;
        top: 50%;
        transform: translateY(10%);
    }
    .rowNumCenter{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        font-size: 12px;
    }
    textarea {
        resize: none;
    }
    .ttt {
        padding: 20px;
        padding-right: 10vw;
    }
</style>
